<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: Infinilist</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: Infinilist</h1>

    




<section>

<header>
    
        <h2>Infinilist</h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    

    <h4 class="name" id="Infinilist"><span class="type-signature"></span>new Infinilist<span class="signature">(selector, template, options, view)</span><span class="type-signature"></span></h4>

    



<div class="description">
    Creates an infinilist instance.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>selector</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            

            <td class="description last">A jQuery selector targeting the element that
will contain the list items.</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>template</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            

            <td class="description last">jQuery selector of the template to use when
rendering an individual list item.</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">The options object.</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>view</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="View.html">View</a></span>


            
            </td>

            

            

            <td class="description last">The view to read data from.</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Infinilist.js.html">Infinilist.js</a>, <a href="Infinilist.js.html#line34">line 34</a>
    </li></ul></dd>
    

    

    

    
</dl>
















    
    </div>

    

    

    

     

    

    
            <h3 class="subsection-title">Methods</h3>

            <ul><li><a href="#resize"><span class="type-signature"></span>resize<span class="signature">()</span><span class="type-signature"></span></a></li></ul>

            
                

    

    <h4 class="name" id="resize"><span class="type-signature"></span>resize<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    Handle screen resizing.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Infinilist.js.html">Infinilist.js</a>, <a href="Infinilist.js.html#line127">line 127</a>
    </li></ul></dd>
    

    

    

    
</dl>
















            
        

    


    

    
</article>

</section>







<section>

<header>
    
        <h2>Infinilist</h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    

    <h4 class="name" id="Infinilist"><span class="type-signature"></span>new Infinilist<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    Provides scrolling lists with large data sets that behave in a very
performance-optimised fashion by controlling the DOM elements currently
on screen to ensure that only the visible elements are rendered and
all other elements are simulated by variable height divs at the top
and bottom of the scrolling list.

This module requires that the AutoBind module is loaded before it
will work.

Infinilists work from views and those views cannot have an $orderBy
clause in them because that would slow down rendering. Instead if you
wish to have your data ordered you have to create a temporary collection
from which your view feeds from and pre-order the data before inserting
it into the temporary collection.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Infinilist.js.html">Infinilist.js</a>, <a href="Infinilist.js.html#line3">line 3</a>
    </li></ul></dd>
    

    

    

    
</dl>



<h5>Requires:</h5>
<ul>
    <li>module:AutoBind</li>
</ul>














    
    </div>

    

    
        <h3 class="subsection-title">Requires</h3>

        <ul>
            <li>module:AutoBind</li>
        </ul>
    

    

     

    

    
            <h3 class="subsection-title">Methods</h3>

            <ul><li><a href="#resize"><span class="type-signature"></span>resize<span class="signature">()</span><span class="type-signature"></span></a></li></ul>

            
                

    

    <h4 class="name" id="resize"><span class="type-signature"></span>resize<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    Handle screen resizing.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Infinilist.js.html">Infinilist.js</a>, <a href="Infinilist.js.html#line127">line 127</a>
    </li></ul></dd>
    

    

    

    
</dl>
















            
        

    


    

    
</article>

</section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ActiveBucket.html">ActiveBucket</a></li><li><a href="Angular.html">Angular</a></li><li><a href="AutoBind.html">AutoBind</a></li><li><a href="Collection.html">Collection</a></li><li><a href="CollectionGroup.html">CollectionGroup</a></li><li><a href="Condition.html">Condition</a></li><li><a href="Core.html">Core</a></li><li><a href="Db.html">Db</a></li><li><a href="Document.html">Document</a></li><li><a href="Grid.html">Grid</a></li><li><a href="Highchart.html">Highchart</a></li><li><a href="Index2d.html">Index2d</a></li><li><a href="IndexBinaryTree.html">IndexBinaryTree</a></li><li><a href="IndexHashMap.html">IndexHashMap</a></li><li><a href="Infinilist.html">Infinilist</a></li><li><a href="KeyValueStore.html">KeyValueStore</a></li><li><a href="Metrics.html">Metrics</a></li><li><a href="MyModule.html">MyModule</a></li><li><a href="NodeApiClient.html">NodeApiClient</a></li><li><a href="NodeApiServer.html">NodeApiServer</a></li><li><a href="NodeRAS.html">NodeRAS</a></li><li><a href="Odm.html">Odm</a></li><li><a href="OldView.html">OldView</a></li><li><a href="Operation.html">Operation</a></li><li><a href="Overload.html">Overload</a></li><li><a href="Overview.html">Overview</a></li><li><a href="Overview_init.html">init</a></li><li><a href="Path.html">Path</a></li><li><a href="Persist.html">Persist</a></li><li><a href="Procedure.html">Procedure</a></li><li><a href="ReactorIO.html">ReactorIO</a></li><li><a href="Section.html">Section</a></li><li><a href="Serialiser.html">Serialiser</a></li><li><a href="Shared.overload.html">overload</a></li><li><a href="View.html">View</a></li></ul><h3>Mixins</h3><ul><li><a href="ChainReactor.html">ChainReactor</a></li><li><a href="Common.html">Common</a></li><li><a href="Constants.html">Constants</a></li><li><a href="Events.html">Events</a></li><li><a href="Matching.html">Matching</a></li><li><a href="Shared.html">Shared</a></li><li><a href="Sorting.html">Sorting</a></li><li><a href="Tags.html">Tags</a></li><li><a href="Triggers.html">Triggers</a></li><li><a href="Updating.html">Updating</a></li></ul><h3><a href="global.html">Global</a></h3>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Thu Mar 01 2018 11:34:23 GMT+0000 (GMT)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>